<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>意见反馈</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/feedback.css" />
</head>
<style type="text/css">
	.b-3{
		background: #333333;
	}
	
	.feedback-file{
		position: absolute;
	    top: 0rem;
	    width: 1.6rem;
	    height: 1.6rem;
	    opacity: 0;
	}
		
</style>
<body>
<div>
    <div class="heads">
        <span href="javascript:;" onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
        <h1 class="titles">意见反馈</h1>
    </div>
    <div class="middle">
        <div class="messages">
            <p class="message">（必选）你想反馈的问题类型</p>
        </div>
        <div class="name">
            <span class="names"></span>
            <span class="name-one">功能异常</span>
        </div>
        <div class="name">
            <span class="names"></span>
            <span class="name-one">产品建议</span>
        </div>
        <div class="name">
            <span class="names"></span>
            <span class="name-one">安全问题</span>
        </div>
        <div class="name">
            <span class="names"></span>
            <span class="name-one">其他问题</span>
        </div>
        <div class="messages">
            <p class="message">请补充详细问题和意见</p>
        </div>
        <div>
            <textarea class="describe" placeholder="请输入不少于10个字的描述"></textarea>
        </div>
        <div>
            <div class="jiahao p-r">
                <img class="jiahaos" src="img/jiahao.png" alt="" id="feedback-img">
                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" onChange="selectImg(this,'feedback-img')" class="feedback-file">
            </div>
        </div>
        
    </div>
    <div type="button" class="submit" >
	    <button class="submits">提交</button>
	</div>
</div>
<script src="js/x_rem.js"></script>
<script src="js/jquery.js"></script>
<script src="js/secondLevel.js"></script>
<script src="js/all.js"></script>
<script type="text/javascript">
	 
 	var btext = ""; 
 	
	$(".middle").on("click",".names",function(){
		$(".names").removeClass("b-3");    //先把其他的.names移除b-3
		$(this).addClass("b-3");       //在给自己加上b-3
		btext = $(this).siblings().text();   //btext就等于this兄弟的text
		 
	})

	 var picture = "";   //用来保存图片地址
	 
	 //换图片
	 function selectImg(file,id) {
			 if (!file.files || !file.files[0]){
	            return;
	        }
 
	        var reader = new FileReader();
	        reader.onload = function (evt) {
	           var replaceSrc = evt.target.result;
	            //更换cropper的图片
	           // $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
				$("#"+id).prop("src",replaceSrc);//显示为图片的形式
  					
  				 
  				 $.ajax({
					type:"post",
					url:Url+"/base64/upload",
					xhrFields:{
						withCredentials:true
					},
					data:{
						base64:replaceSrc
					},
					success:((data)=>{
						console.log(data);
						if(data.success){
							picture = data.message;
						}else{
							popup(data.message);
						}
						
					}),
					error:((err)=>{
						console.log(err);
					})
				});
  				 
	        }
	        reader.readAsDataURL(file.files[0]);
	       // base64Images.pust();	
 
		}
		
	 //提交
	 
	 $(".submits").click(()=>{
	 	if(!vali(".describe", /^(?=([\u4e00-\u9fa5].*){10})/, "最少十个汉字")){
	 		
	 	}else if(btext == ""){
	 		popup("请选择问题类型");
	 	}else{
	 		$.ajax({
	 			type:"post",
	 			url:Url+"/proposal/addProposal",
	 			xhrFields:{
	 				withCredentials: true
	 			},
	 			data:{
	 				type:btext,
	 				body:$(".describe").val(),
	 				pictureUrl:picture
	 			},
	 			success:((data)=>{
	 				console.log(data);
	 				popup(data.message);
	 			}),
	 			error:((err)=>{
	 				console.log(err);
	 			})
	 		});
	 	}
	 	
	 })
	
	
	
	
</script>
</body>
</html>